<template>
	<view>
		<view class="u-m-t-20">
			<u-cell-group><u-cell-item v-for="(item, index) in testList" :key="index" :icon="item.icon" :title="item.title" @click="routerTo(item)"></u-cell-item></u-cell-group>
		</view>
	</view>
</template>

<script>
/* npm已引入uni-simple-router,参考：https://hhyang.cn/v2/
 *页面路由跳转使用说明：
 *router.push() 等同于 uni.navigateTo()使用：this.$Router.push({ name: 'router1', params: { userId: '123' }})
 *router.replace() 等同于 uni.redirectTo()使用：this.$Router.replace({ name: 'router1', params: { userId: '123' }})
 *router.replaceAll() 等同于 uni.reLaunch()使用：this.$Router.replaceAll({ name: 'router1', params: { userId: '123' }})
 *router.pushTab() 等同于 uni.switchTab()使用：this.$Router.pushTab({ name: 'router1', params: { userId: '123' }})
 *router.back(n,{...}) 等同于 uni.navigateBack()使用：this.$Router.back(2)
 *推荐使用#命名路由
 *{
 *  path: '/pages/router/router1/router1',
 *  name: 'router1'
 *},
 */
export default {
	data() {
		return {
			testList: [
				{ title: 'push', icon: 'star', name: 'testRouter', type: 'push' },
				{ title: 'replace', icon: 'coupon', name: 'testRepuest', type: 'replace' },
				{ title: 'replaceAll-tabbar-index', icon: 'coupon', name: 'tabbar', type: 'replaceAll', query: 'index' },
				{ title: 'replaceAll-tabbar-control', icon: 'coupon', name: 'tabbar', type: 'replaceAll', query: 'control' },
				{ title: 'replaceAll-tabbar-user', icon: 'coupon', name: 'tabbar', type: 'replaceAll', query: 'user' },
				{ title: 'pushTab-tabbar X', icon: 'coupon', name: 'tabbar', type: 'pushTab' },
				{ title: 'pushTab-user X', icon: 'coupon', name: 'user', type: 'pushTab' },
				{ title: 'pushTab-control X', icon: 'coupon', name: 'control', type: 'pushTab' },
				{ title: 'pushTab-index X', icon: 'coupon', name: 'index', type: 'pushTab' }
			]
		};
	},
	onLoad() {
		console.log(this.$Route);
	},
	methods: {
		routerTo(data) {
			console.log('data==', data);
			console.log('data=type=', data.type);
			console.log('data=name=', data.name);
			switch (data.type) {
				case 'push':
					this.$Router.push({ name: data.name });
					break;
				case 'replace':
					this.$Router.replace({ name: data.name });
					break;
				case 'replaceAll':
					this.$Router.replaceAll({ name: data.name, params: { query: data.query } });
					break;
				case 'pushTab':
					this.$Router.pushTab({ name: data.name });
					break;
				default:
					this.$Router.back(2);
					break;
			}
		}
	}
};
</script>

<style lang="scss"></style>
